<template>
<div >
  <div class="nav" >
      <h2 class="title">网易云</h2>
      <button class="button">下载APP</button>
     </div>
        <div>
<van-tabs  v-model="active">
 <van-tab title="推荐音乐"  name="1"><recommend></recommend></van-tab>
  <van-tab title="热歌榜"  name="2"><hot></hot></van-tab>
  <van-tab title="搜索"  name="3"><search></search></van-tab>
</van-tabs>
        </div>
        </div>
     
  
</template>
<script>
// import Recommend from"./components/Recommend.vue"
// import Hot from "../componets/Recommend.vue"
import Hot from"../components/Hot.vue"
import Recommend from"../components/Recommend.vue"
import Search from"../components/Search.vue"
export default {
    name: "Music",
    components:{
        Recommend,
        Hot,
        Search

    },
    data(){
        return{
            active: 2,
        }
    },
    methods:{
        // tab(){
        //     this.active==this.title
        // }
    }
}
</script>


<style  scoped>
/* .body{
    overflow: hidden;
    width: 100%;
    height: 100%;
} */
.nav{
       overflow: hidden;
    height:48px;;
    background-color:#C20C0C;
}
.title{
     float: left;
    color:white;
    padding: 10px;
    width: 150px;
}
.button{
    float: right;
    margin: 9px;
    border-radius:15px 15px;
     width: 103px;
    padding: 5px;
    color:#C20C0C;
     background-color:white;
    border: 2px solid #C20C0C;; /* Green */
}
van-tab{
    margin: 29px;
}
.class{
      color:#C20C0C;
}

</style>

